<template>
  <div class="common-wrapper">
    <div class="common-title">参数修改记录</div>
    <div class="common-main">
      <el-form
        ref="search"
        class="common-search"
        :inline="true"
        :rules="searchRules"
        :model="search"
        :show-message="false"
      >
        <el-form-item>
          <el-select
            v-model="search.org"
            placeholder="选择组织"
            size="small"
            clearable
          >
            <el-option
              v-for="(item, index) in orgOption"
              :key="index"
              :label="item['key_value']"
              :value="item['key_value']"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="search.cj"
            placeholder="选择车间"
            size="small"
            clearable
          >
            <el-option
              v-for="(item, index) in cjOption"
              :key="index"
              :label="item['key_value']"
              :value="item['key_value']"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="search.gongxu"
            placeholder="选择工序"
            size="small"
            clearable
            @change="changeGX"
          >
            <el-option
              v-for="(item, index) in gxOption"
              :key="index"
              :label="item['key_value']"
              :value="item['key_value']"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="params">
          <el-select
            v-model="search.params"
            placeholder="选择参数"
            size="small"
            multiple
            clearable
            class="mul-selection"
            popper-class="mul-select"
            collapse-tags
          >
            <el-option
              v-for="(item, index) in csOption"
              :key="index"
              :label="item.dictValue"
              :value="item.dictCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="search.devSn"
            placeholder="选择机台"
            size="small"
            multiple
            clearable
            class="mul-selection"
            popper-class="mul-select"
            collapse-tags
          >
            <el-option
              v-for="(item, index) in equipOption"
              :key="index"
              :label="search.gongxu + item.key_value + '号'"
              :value="item.key_value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            size="small"
            v-model="time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            clearable
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="search.bc"
            placeholder="选择班次"
            size="small"
            clearable
          >
            <!-- 待修改 -->
            <el-option label="班次1" value="1"></el-option>
            <el-option label="班次2" value="2"></el-option>
            <el-option label="班次3" value="3"></el-option>
            <el-option label="班次4" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="btn-list">
          <el-button type="primary" size="small" @click="searchNow"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <div class="common-table" ref="table">
        <el-table
          :data="tableData"
          style="width: 100%"
          :max-height="tableHeight"
        >
          <el-table-column label="序号" width="55" align="center">
            <template slot-scope="{ row, column, $index }">
              {{ parseInt($index) + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="org"
            label="组织"
            min-width="20%"
            align="center"
          />
          <el-table-column
            prop="cj"
            label="车间"
            min-width="20%"
            align="center"
          />
          <el-table-column
            prop="devSn"
            label="车台"
            min-width="20%"
            align="center"
          />
          <el-table-column
            prop="gongxu"
            label="参数"
            min-width="20%"
            align="center"
          />
          <el-table-column
            prop="time"
            label="修改前参数"
            min-width="20%"
            align="center"
          />
          <el-table-column
            prop="time"
            label="修改后参数"
            min-width="20%"
            align="center"
          />

          <el-table-column
            prop="time"
            label="修改时间"
            min-width="20%"
            align="center"
          />
        </el-table>
      </div>
      <div class="common-pagination">
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :page-size="search.pageSize"
          :current-page.sync="search.pageNum"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { commonParam, getSysDict, getSysDictByName } from '@/api/common';
import { getHistoryTrackData } from '@/api/production';
export default {
  data() {
    return {
      tableHeight: 200,
      time: ['2021-09-22', '2021-09-22'],
      search: {
        bc: '1',
        beginDate: '2021-09-22',
        cj: '五纺',
        endDate: '2021-09-22',
        gongxu: '',
        devSn: [1, 2],
        org: '恒源',
        params: ['llzs', 'llxs'],
        pageSize: 10,
        pageNum: 1,
      },
      searchRules: {
        params: [
          { required: true, message: '请选择参数！', trigger: 'change' },
        ],
      },
      total: 10,
      csOption: [],
      equipOption: [],
      tableData: [],
    };
  },
  created() {
    window.addEventListener('resize', () => {
      this.getHeight();
    });
    this.getCs(1);
  },
  mounted() {
    document.getElementsByClassName(
      'el-pagination__jump'
    )[0].childNodes[0].nodeValue = '跳至';
    this.$nextTick(() => {
      this.getHeight();
      this.getTableData();
    });
  },
  destroyed() {
    window.removeEventListener('resize', this.getHeight);
  },
  watch: {
    time: function (val) {
      if (val) {
        this.search.beginDate = val[0];
        this.search.endDate = val[1];
      } else {
        this.search.beginDate = '';
        this.search.endDate = '';
      }
    },
  },
  computed: {
    orgOption() {
      return this.$store.getters.orgOption;
    },
    cjOption() {
      return this.$store.getters.cjOption;
    },
    gxOption() {
      return this.$store.getters.gxOption;
    },
  },
  methods: {
    async getCs(val) {
      const csData = await commonParam({ type: val });
      this.csOption = csData.data;
    },
    async getEquip(val) {
      const equipData = await getSysDict(val);
      this.equipOption = equipData.data.dataList;
    },
    async changeGX(val) {
      // this.getParams(val);
      this.search.devSn = [];
      if (val) {
        const res = await getSysDictByName(val + '设备');
        if (res.code == 1) {
          let bh = res.data.dataList[0]['bh'];
          this.getEquip(bh);
        }
      } else {
        this.equipOption = [];
      }
    },
    async getTableData() {
      const res = await getHistoryTrackData(this.search);
      if (res.code == 1) {
        this.tableData = res.data.list;
        this.total = res.data.total;
      }
    },
    searchNow() {
      this.$refs['search'].validate((valid, object) => {
        if (valid) {
          this.getTableData();
        } else {
          let falseMsg = [];
          for (let i in object) {
            falseMsg.push(object[i][0].message);
          }
          falseMsg = falseMsg.join('、');
          this.$message({
            message: `请选择${falseMsg}`,
            iconClass: 'el-icon-warning',
            customClass: 'common-message',
          });
          return false;
        }
      });
    },
    getHeight() {
      this.tableHeight = this.$refs.table.offsetHeight;
    },
    handleSizeChange(val) {
      this.search.pageNum = 1;
      this.search.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.search.pageNum = val;
      this.getTableData();
    },
  },
};
</script>

<style lang="stylus" scoped>
.common-wrapper {
  height: 100%;
}

.common-search {
  display: flex;

  ::v-deep .btn-list .el-form-item__content {
    display: flex;
  }
}
</style>
